<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    html{
      /*height: 657px;*/
    }
    .layui-upload-img{
      width: 100px;
    }
    .layui-tab-content{
      position: relative;
      /*height: 570px;*/
      overflow-y:auto ;
      overflow-x: hidden;
    }
    .layui-form-item .layui-input-inline{
      width: 500px;
    }
    .uploadimgbox{
      position: relative;
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 15px;
      margin-bottom: 15px;
    }

    .uploadimgbox  .layui-icon{
      position: absolute;
      right: -15px;
      top: -15px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="layui-tab layui-tab-card" style="box-shadow: none">
  <ul class="layui-tab-title">
    {empty name='$typeid'}<li class="layui-this">POI</li>{/empty}
    {volist name='classify_list' id='class_value'}
    {if !empty($typeid)&&$typeid==$class_value['classify_id']} <li class="layui-this">{$class_value['classify_name']}</li>{/if}
    {/volist}
  </ul>
  <div class="layui-tab-content">
    <div id="map" style="width: 600px;height: 150px;margin: 10px 0;margin-left: 110px;background: #eee;overflow: hidden;">
      <img src="{notempty name='$menu.map_thumb_img'}{$menu.map_thumb_img}{/notempty}" width="600" height="300" alt="" style="margin-top: -75px">
    </div>
    <div class="layui-tab-item layui-show">
      <form class="layui-form" id="form">
        {if $groupid}
        <input type="hidden" name="groupid" value="{$groupid}">
        {/if}

        <input id="typeid" type="hidden" name="typeid" value="{notempty name='typeid'}{$typeid}{/notempty}">

        {notempty name="$menu"}
        <input type="hidden" name="id" value="{$menu.id}">
        {/notempty}

        <div class="layui-form-item">
          <label class="layui-form-label">POI类型</label>
          <div class="layui-input-inline" style="width: 450px;z-index:1000;">
            <select name="typeid" lay-filter="setType" lay-verify="required">
              <option value="">请选择</option>
              {volist name='classify_list' id='class_value'}
              <option value="{$class_value['classify_id']}" {if isset($typeid) && $typeid==$class_value['classify_id']} selected{/if}>{$class_value['classify_name']}</option>
              {/volist}
            </select>
          </div>
        </div>

        <!--名称-->
        <div class="layui-form-item">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-inline" style="position: relative">
            <input name="name" id="poiname" value="{notempty name='$menu'}{$menu.name}{/notempty}" lay-verify="required" placeholder="请输入名称获取地址" autocomplete="off" class="layui-input" type="text">
            <div class="addressbox"></div>

          </div>
        </div>

        <!--英文名-->
        <div class="layui-form-item">
          <label class="layui-form-label">英文名</label>
          <div class="layui-input-inline">
            <input name="eng_name" id="eng_name" maxlength="255" value="{notempty name='$menu'}{$menu.eng_name}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
          </div>
        </div>

        <!--门店-->
        <div class="layui-form-item show5">
          <label class="layui-form-label">门店</label>
          <div class="layui-input-inline" style="position: relative">
            <input name="shop" value="{notempty name='$menu'}{$menu.shop}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
          </div>
        </div>

        <!--排序-->
        <div class="layui-form-item">
          <label class="layui-form-label">排序</label>
          <div class="layui-input-inline">
            <input name="poi_sort" maxlength="50" style="width:150px;" value="{notempty name='$menu'}{$menu.poi_sort}{/notempty}"  placeholder="请输入" autocomplete="off" class="layui-input" type="number">
          </div>
        </div>

        <!--地址-->
        <div class="layui-form-item">
          <label class="layui-form-label">地址</label>
          <div class="layui-input-inline">
            <input name="address" id="address" value="{notempty name='$menu'}{$menu.address}{/notempty}" lay-verify="required" placeholder="请输入"  class="layui-input" type="text">
          </div>
        </div>

        <input type="hidden" name="lat" value="{notempty name='$menu'}{$menu.lat}{/notempty}">
        <input type="hidden" name="lng" value="{notempty name='$menu'}{$menu.lng}{/notempty}">
        <input type="hidden" name="place_id" value="{notempty name='$menu'}{$menu.place_id}{/notempty}">
        <input type="hidden" name="map_thumb_img" value="{notempty name='$menu'}{$menu.map_thumb_img}{/notempty}">

        <!--中文介绍-->
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">中文介绍</label>
          <div class="layui-input-block" style="max-width:500px;">
            <textarea placeholder="请输入内容" id="introduce" class="layui-textarea" name="introduce">{notempty name='$menu'}{$menu.introduce}{/notempty}</textarea>
          </div>
        </div>

        <!--英文介绍-->
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">英文介绍</label>
          <div class="layui-input-block" style="max-width:500px;">
            <textarea placeholder="请输入内容" id="eng_introduce" class="layui-textarea" name="eng_introduce">{notempty name='$menu'}{$menu.eng_introduce}{/notempty}</textarea>
          </div>
        </div>

        <!--开放时间-->
        <div class="layui-form-item">
          <label class="layui-form-label">开放时间</label>
          <div class="layui-input-inline">
            <textarea placeholder="请输入内容" class="layui-textarea" name="open_time">{notempty name='$menu'}{$menu.open_time}{/notempty}</textarea>
          </div>
        </div>

        <!--用时参考-->
        <div class="layui-form-item show2">
          <label class="layui-form-label">用时参考</label>
          <div class="layui-input-inline">
            <textarea  placeholder="请输入内容" class="layui-textarea" name="use_time">{notempty name='$menu'}{$menu.use_time}{/notempty}</textarea>
          </div>
        </div>

        <!--&lt;!&ndash;门票信息&ndash;&gt;-->
        <!--<div class="layui-form-item show1">-->
        <!--<label class="layui-form-label">门票信息</label>-->
        <!--<div class="layui-input-inline">-->
        <!--<textarea placeholder="请输入内容" class="layui-textarea" name="ticket">{notempty name='$menu'}{$menu.ticket}{/notempty}</textarea>-->
        <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;门票成本&ndash;&gt;-->
        <!--<div class="layui-form-item show1">-->
          <!--<label class="layui-form-label">门票成本</label>-->
          <!--<div class="layui-input-inline">-->
            <!--<textarea placeholder="请输入内容" class="layui-textarea" name="ticket_cost">{notempty name='$menu'}{$menu.ticket_cost}{/notempty}</textarea>-->
          <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;门票最后一次修改时间&ndash;&gt;-->
        <!--<div class="layui-form-item show1">-->
          <!--<label class="layui-form-label">门票修改时间</label>-->
          <!--<div class="layui-input-inline">-->
            <!--<input maxlength="50"  class="layui-input" value="{notempty name='$menu'}{$menu.ticket_last_updtime}{/notempty}"  type="text" readonly>-->
          <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;门票最后一次修改时间&ndash;&gt;-->
        <!--<div class="layui-form-item show1">-->
          <!--<label class="layui-form-label">门票修改人</label>-->
          <!--<div class="layui-input-inline">-->
            <!--<input maxlength="50"  class="layui-input" value="{notempty name='$menu'}{$menu.ticket_last_admin}{/notempty}"  type="text" readonly>-->
          <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;订票网址&ndash;&gt;-->
        <!--<div class="layui-form-item show2">-->
          <!--<label class="layui-form-label">订票网址</label>-->
          <!--<div class="layui-input-inline">-->
            <!--<input name="ticket_url" maxlength="100" value="{notempty name='$menu'}{$menu.ticket_url}{/notempty}"  placeholder="请输入" autocomplete="off" class="layui-input" type="text">-->
          <!--</div>-->
        <!--</div>-->

        <!--联系方式-->
        <div class="layui-form-item">
          <label class="layui-form-label">联系方式</label>
          <div class="layui-input-inline">
            <textarea placeholder="请输入内容" class="layui-textarea" name="mobile">{notempty name='$menu'}{$menu.mobile}{/notempty}</textarea>
          </div>
        </div>

        <!--菜系-->
        <div class="layui-form-item show4">
          <label class="layui-form-label">菜系</label>
          <div class="layui-input-inline">
            <input name="cooking" maxlength="50" value="{notempty name='$menu'}{$menu.cooking}{/notempty}"  placeholder="请输入" autocomplete="off" class="layui-input" type="text">
          </div>
        </div>

        <!--来源-->
        <div class="layui-form-item show1">
          <label class="layui-form-label">来源</label>
          <div class="layui-input-inline">
            <input name="source" value="{notempty name='$menu'}{$menu.source}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
          </div>
        </div>

        <!--评分-->
        <div class="layui-form-item show1">
          <label class="layui-form-label">评分</label>
          <div class="layui-input-inline">
            <input name="score" value="{notempty name='$menu'}{$menu.score}{/notempty}" placeholder="0~5；例：2.3" autocomplete="off" class="layui-input" type="number" min="0" max="5" step="0.1">
          </div>
        </div>

        <!--酒店星级-->
        <div class="layui-form-item layui-form-text show3">
          <label class="layui-form-label">星级</label>
          <div class="layui-input-inline">
            <select name="grade">
              <option value="" {notempty name='$menu'}{if empty($menu.grade)}selected{/if}{/notempty}></option>
              <option value="1" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='1'}selected{/if}{/notempty}>一星</option>
              <option value="2" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='2'}selected{/if}{/notempty}>二星</option>
              <option value="3" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='3'}selected{/if}{/notempty}>三星</option>
              <option value="4" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='4'}selected{/if}{/notempty}>四星</option>
              <option value="5" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='5'}selected{/if}{/notempty}>五星</option>
            </select>
          </div>
        </div>

        <!--特别说明-->
        <div class="layui-form-item">
          <label class="layui-form-label">特别说明</label>
          <div class="layui-input-block" style="max-width:500px;">
            <textarea placeholder="主要填写目的地当季的时效性动态（节日、活动等）" class="layui-textarea" name="description">{notempty name='$menu'}{$menu.description}{/notempty}</textarea>
          </div>
        </div>

          <!--酒店参数-->
          <div id="hotel_div" {if !empty($menu.typeid) && $menu.typeid!==5}style="display:none;"{/if}>
              <div class="layui-form-item">
                  <label class="layui-form-label">早餐</label>
                  <div class="layui-input-block" style="max-width:500px;">
                      <textarea placeholder="请输入内容" class="layui-textarea" name="breakfast_fee">{notempty name='$menu.breakfast_fee'}{$menu.breakfast_fee}{/notempty}</textarea>
                  </div>
              </div>
              <div class="layui-form-item">
                  <label class="layui-form-label">加人费</label>
                  <div class="layui-input-block" style="max-width:500px;">
                      <textarea placeholder="请输入内容" class="layui-textarea" name="charging_fee">{notempty name='$menu.charging_fee'}{$menu.charging_fee}{/notempty}</textarea>
                  </div>
              </div>
              <div class="layui-form-item">
                  <label class="layui-form-label">服务费</label>
                  <div class="layui-input-block" style="max-width:500px;">
                      <textarea placeholder="请输入内容" class="layui-textarea" name="service_fee">{notempty name='$menu.service_fee'}{$menu.service_fee}{/notempty}</textarea>
                  </div>
              </div>
              <div class="layui-form-item">
                  <label class="layui-form-label">入住时间</label>
                  <div class="layui-input-inline">
                      <input name="checkin_time" value="{notempty name='$menu.checkin_time'}{$menu.checkin_time}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                  </div>
              </div>
          </div>


        <!--图片上传-->
        <div class="layui-form-item" style="margin:0 110px">
          <div class="layui-upload" >
            <button type="button" class="layui-btn" id="upload">图片上传（格式：jpg,png,gif,jpeg）</button>
            {include file='public/uploadfiletips'}
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
              预览图：
              <div class="layui-upload-list" id="seeupload">
                {volist name="$thumb" id="vo"}
                {if !empty($vo)}
                <span class="uploadimgbox"><img class="layui-upload-img" src="{$vo}"><i class="layui-icon">&#x1006;</i></span>
                {/if}
                {/volist}
              </div>
            </blockquote>
          </div>
          <input id="upload-thumb" type="hidden" name="thumb" value="{notempty name='$menu'}{$menu['thumb']}{/notempty}">
        </div>

        <!--提交-->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <a class="layui-btn" lay-submit lay-filter="form">立即提交</a>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script>
    layui.use(['layer', 'form','upload'], function(){
        var upload = layui.upload,
            layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        //执行实例
        upload.render({
            elem: '#upload'
            ,url: "{:url('common/upload')}"
            ,multiple: true
            ,accept:"images"
            ,size:"50000"
            , before: function (obj) {
                layer.load(2);
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    EXIF.getData(file, function() {
                        //获取图片Orientation
                        orient = EXIF.getTag(this, 'Orientation');
                        if(orient==6){
                            //逆时针旋转了90度
                            rotateBase64Img(result,90,callback);
                        }else if(orient==1){
                            $('#demo1').attr('src', result); //图片链接（base64）
                        }
                    });

                });
            }
            ,done: function(res){
                //上传完毕回调
                layer.closeAll('loading');
                if(res.code == 2) {
                    $('#seeupload').append('<span class="uploadimgbox"><img class="layui-upload-img" src="'+res.src+'"><i class="layui-icon">&#x1006;</i></span>');
                    $('#upload-thumb').val($('#upload-thumb').val()+","+res.src);
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                layer.closeAll('loading');
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        //表单提交
        form.on('submit(form)', function(data) {
            var add_load_index = layer.load(2,{shade: [0.5, '#393D49']});
            $.ajax({
                url:"{:url('admin/poi/addpoi')}",
                data:$('#form').serialize(),
                type:'post',
                async: false,
                success:function(res) {
                    console.log('start result');

                    layer.close(add_load_index);
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },1500)
                    }
                }
            });
            return false;
        });
    });

    $("#seeupload").on("click",".layui-icon",function(){
        $(this).parent().remove();
        thumb("seeupload");
    });

    function thumb(obj){
        var thumbs="";
        $("#"+obj).find("img").each(function(){
            var url=$(this).attr("src");
            thumbs+=","+url;
        });
        $("#upload-thumb").val(thumbs);
    }
</script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(window).on('load', function() {
            form.on('select(setType)',function(data){
                var typeid = data.value;
                setShow(typeid);
            });

            function setShow(typeid){
                if(typeid=='1' || typeid=='6'){
                    $(".show1").show();
                    $(".show2,.show3,.show4,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='2' || typeid=='3' || typeid=='4'){
                    $(".show1,.show2").show();
                    $(".show3,.show4,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='5'){
                    //酒店
                    $(".show1,.show3").show();
                    $(".show2,.show4,.show5").hide();
                    $("#hotel_div").show();
                }else if(typeid=='11'){
                    //美食
                    $(".show1,.show4").show();
                    $(".show2,.show3,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='12'){
                    $(".show1,.show2,.show3,.show4,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='13' || typeid=='14' || typeid=='15'){
                    $(".show5").show();
                    $(".show1,.show2,.show3,.show4").hide();
                    $("#hotel_div").hide();
                }
                return false;
            }

            var typeid = $("#typeid").attr("value");
            if(typeid!==undefined && typeid>0){
                setShow(typeid);
            }else{
                setShow(1);
            }

            //选中地点
            var googleMapData = [];
            //如果详细地址未匹配到信息则使用列表中的数据
            function setAddressByList(res,googleMapData,address)
            {
                if(res.data.candidates.length < 1 || "OK" != res.data.status){
                    if(googleMapData.length > 0){
                        $.each(googleMapData,function (i,v) {
                            if(v.formatted_address==address){
                                $.ajaxSettings.async = false;
                                $.post('{:url("/api/common/getGoogleImgByLatLng")}',{
                                    lat:v.geometry.location.lat,
                                    lng:v.geometry.location.lng,
                                    zoom:8
                                },function (img_res) {
                                    if(img_res.code>0){
                                        res.data.google_map_img = img_res.data.google_map_img;
                                        res.data.status = 'OK';
                                    }
                                },'json')
                                $.ajaxSettings.async = true;
                                res.data.candidates.push(v);return false;
                            }
                        })
                    }
                }

                return res;
            }
            function setAddress(address) {
                //切换成接口访问
                $.post('{:url("/api/common/getGoogleAddressList")}',{address:address,getMap:true},function (res) {
                    if(res.code>0){
                        var res = setAddressByList(res,googleMapData,address);
                        var candidates = res.data.candidates;
                        if(candidates.length>0 && "OK" == res.data.status){
                            $("input[name=lat]").val(candidates[0].geometry.location.lat);
                            $("input[name=lng]").val(candidates[0].geometry.location.lng);
                            $("input[name=place_id]").val(candidates[0].place_id);
                            $("input[name=eng_name]").val(candidates[0].name);
                            $("input[name=address]").val(address);
                            $("input[name=map_thumb_img]").val(res.data.google_map_img);
                            $("#map img").attr('src',res.data.google_map_img);
                        }
                    }
                },'json')
            }
            //获取地址列表
            function getAddressList(address) {
                var addressbox="";
                if(address=='' || address==undefined){
                    return false;
                }
                //切换成接口访问
                $.post('{:url("/api/common/getGoogleAddressList")}',{address:address},function (res) {
                    if(res.code>0){
                        var candidates = res.data.candidates;
                        googleMapData = res.data.candidates;
                        if(candidates.length > 0 && "OK" == res.data.status){
                            $.each(candidates,function (i,v) {
                                if(i>4){
                                    return false;
                                }
                                addressbox+="<span>"+v.formatted_address+"</span>";
                            })
                            console.log(addressbox);
                            $(".addressbox").html(addressbox);
                        }
                    }
                },'json')
            }
            //延迟加载输入
            var timeoutId = 0;
            //英文输入绑定事件
            $("#poiname").on("input",function(){
                hiddenAddressBox();
                clearTimeout(timeoutId);
                var value = $(this).val();
                timeoutId = setTimeout(function(){
                    getAddressList(value);
                },1000)
            });
            //点击地址设置地址
            $("#form .addressbox").on("click","span",function(){
                var address = $(this).html();
                setAddress(address);
            });
            //取消地址列表框
            $("body").on("click",function(){
                hiddenAddressBox()
            })
            //清掉地址列表
            function hiddenAddressBox()
            {
                $(".addressbox").html("");
            }


        });
    });
</script>
</body>
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('introduce',{
        initialFrameHeight: 100,
        initialFrameWidth: 480,
        zIndex:99,
        toolbars:[
            [ 'source'],
            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough','removeformat']
        ]
    });
    var ue2 = UE.getEditor('eng_introduce',{
        initialFrameHeight: 100,
        initialFrameWidth: 480,
        zIndex:99,
        toolbars:[
            [ 'source'],
            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough','removeformat']
        ]
    });
</script>
</html>
